iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
1
Modern Web

實踐無障礙網頁設計(Web Accessibility)系列 第 23

實作無障礙網頁功能:此 Switch 非彼 Switch,可訪問的雙狀態開關作法。

  • 分享至 

  • xImage
  •  

這系列無障礙的鐵人賽文章,實踐的內容主要是根據 W3C:WAI-ARIA 的實踐,從設計模式及組件(Design Patterns and Widgets)裡面挑選最想嘗試的,如果有朋友想瞭解全部 Widget 該怎麼實作及其規範,歡迎自行爬規範內容,也許我們可以討論一下;若以下文章內容理解有任何錯誤,請多指教~

(圖片來源:Unsplash

開關 Switch(打開文件

本篇文章介紹的 switch 是 WAI-ARIA 的角色之一,不是前幾天的 WAI-ARIA Practice 1.1 中的設計模式。
A type of checkbox that represents on/off values, as opposed to checked/unchecked values. See related checkbox.

不是任天堂的 switch 啊...

(圖片來源:NINTENDO

switch 這個角色是「開關」的意思。我還記得我對真正對 switch 有印象的是 iPhone 的介面中,有個開關,我還因此也跑去找像這樣的介面該怎麼刻?這是那時候的 Codepen:checkbox for the toggling bar,就...做了一個粉紅色的這樣。那時候完全沒有考慮到訪問性的問題,因為對網頁無障礙方面沒任何認知。所以今天想拿這個以前做過的東西,改成無障礙的版本!


鍵盤的可訪問性

  • 要確保 switch 可以成為焦點(focusable)。

Roles、States、Properties

  • 開關的容器要指定角色屬性 roleswitch
    • swtich 這個角色繼承自 checkbox 角色(Superclass)。
  • 設定 aria-checked 的值,為 truefalse
    • 這代表了這個「開關」功能的開與關。針對 checkbox 可以提供的第三個值 mixed 在此無效。

重要註記:
switch 角色提供了與 checkboxtoggle button 幾乎相同的功能,但我們指定 switch 作為角色的值,而不是使用 checkbox ,是因為輔助科技能以與其螢幕外觀一致的方式顯示我們的 widget。


拿以前做過的開關組件來改善吧!請打開 Codepen 看看我以前亂寫的東西:checkbox for the toggling bar

原本的原始碼

HTML

<div class="carousel_box">
  <input type="checkbox" class="carousel_online" id="toggle-1" name="online" checked>
  <label for="toggle-1">
    <span class="online"></span>
  </label>
</div>
  • 沒有定義角色 switch,也沒有必要屬性 aria-checked設定開關值。
  • 原本就想做粉紅色的開關...,不過沒意識到對比度非常低,且粉紅色對開與關的狀態沒什麼指示性,所以決定改個做法。
  • 這個開關小組件沒有成為焦點時需要存在的 focus ring,但可以使用鍵盤操作。
  • 標籤 <label> 沒有標示這個元件的名稱,反而把名稱放到偽元素。
  • 以前的 CSS class 命名看不懂啦?!而且以前不知道 SCSS (>__<)

更改後的原始碼,快來 Codepen 操作看看

HTML

<div class="switch" role="switch" aria-checked="false">
  <input type="checkbox" class="switch__checkbox" id="toggle-1" name="online">
  <label for="toggle-1" class="switch__label">
    <span class="switch__status-message">Online</span>
  </label>
</div>
  • 開關容器定義了 switch 角色,設定了 aria-checked 屬性。
  • 開關改成綠色,這個綠色我去偷吸 Element UI 的 Switch 顏色~
  • 為這個開關組件,加上了一個成為焦點時該有的樣式。
  • <label> 中放置的狀態提出來,如果可以做更多的話,應該是使用 JavaScript 做狀態的初始化。
  • 改善 CSS 命名、權重、改用 SCSS 整理一遍。

現在可以使用鍵盤操作,狀態也都看得很清楚,需要實現無障礙的 Switch 的人請自行再模組化吧!

開心~


Reference


上一篇
實作無障礙網頁功能:頁籤 Tabs
下一篇
實作無障礙網頁功能:無障礙定位點(導盲磚 `:::`)
系列文
實踐無障礙網頁設計(Web Accessibility)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言